// reset

* {
  box-sizing        : border-box;
  -webkit-box-sizing: border-box;
  outline           : none;
  font-family       : "Microsoft YaHei";
}

html {
  font-size: 16px;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin : 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.h-auto {
  height: auto;
}

.w-auto {
  width: auto;
}

@base-size: 1rem;

.border-radius() {
  0   : 0;
  2px : 2px;
  4px : 4px;
  8px : 8px;
  15px: 15px;
  99px: 99px;
  5   : 5%;
  10  : 10%;
  50  : 50%;
}

.config() {
  0   : 0;
  1   : (1/16);
  2   : (2/16);
  3   : (3/16);
  4   : (4/16);
  6   : (6/16);
  8   : (8/16);
  10  : (10/16);
  12  : (12/16);
  14  : (14/16);
  16  : (16/16);
  18  : (18/16);
  20  : (20/16);
  22  : (22/16);
  24  : (24/16);
  28  : (28/16);
  30  : (30/16);
  32  : (32/16);
  34  : (34/16);
  36  : (36/16);
  40  : (40/16);
  42  : (42/16);
  44  : (44/16);
  48  : (48/16);
  50  : (50/16);
  56  : (56/16);
  60  : (60/16);
  64  : (64/16);
  70  : (70/16);
  75  : (75/16);
  80  : (80/16);
  83  : (83/16);
  85  : (85/16);
  86  : (86/16);
  92  : (92/16);
  96  : (96/16);
  100 : (100/16);
  115 : (115/16);
  120 : (120/16);
  130 : (130/16);
  138 : (138/16);
  140 : (140/16);
  141 : (141/16);
  150 : (150/16);
  160 : (160/16);
  170 : (170/16);
  188 : (188/16);
  200 : (200/16);
  208 : (208/16);
  220 : (220/16);
  230 : (230/16);
  240 : (240/16);
  250 : (250/16);
  255 : (255/16);
  260 : (260/16);
  264 : (264/16);
  280 : (280/16);
  288 : (288/16);
  300 : (300/16);
  320 : (320/16);
  340 : (340/16);
  357 : (357/16);
  360 : (360/16);
  380 : (380/16);
  400 : (400/16);
  420 : (420/16);
  460 : (460/16);
  500 : (500/16);
  560 : (560/16);
  700 : (700/16);
  740 : (740/16);
  960 : (960/16);
  980 : (980/16);
  1200: (1200/16);
  1214: (1214/16);
}

// color
.colors() {
  black : #000000;
  white : #ffffff;
  red   : #B61F26;
  orange: #F5A22B;
  yellow: #FFD900;
  grey  : #E3E7E8;
  cyan  : #30AFC2;
  blue  : #027aff;
  A8    : #A8A8A8;
  C7    : #C7C7C7;
  ED    : #EDEDED;
  E5    : #E5E5E5;
  EF    : #EFEFEF;
  F2    : #F2F2F2;
  F3    : #F3F3F3;
  F4    : #F4F4F4;
  F5    : #F5F5F5;
  F8    : #F8F8F8;
  F9    : #F9F9F9;
  3     : #333333;
  6     : #666666;
  9     : #999999;
  36    : #363636;
  75    : #757575;
  6C    : #6C6C6C;
  E     : #EEEEEE;
  FA    : #FAFAFA;
  EC    : #ECECEC;
  FC    : #FCFCFC;
  C     : #CCCCCC;
  40    : #404040;
}

each(.colors(), {

    // 文字颜色
    .color-@{key} {
      color:@value;
    }

    // 背景颜色
    .bg-@{key} {
      background-color:@value
    }
  }

);

.font-weight() {
  100: 100;
  200: 200;
  300: 300;
  400: 400;
}

// 粗细
.lighter {
  font-weight: lighter;
}

.bold {
  font-weight: bold;
}

// 文字对齐方式
@text-align: left, center, right;

.text-justify {
  text-align-last: justify;
}

each(@text-align, {
    .text-@{value} {
      text-align: @value;
    }

    .text-last-@{value} {
      text-align-last: @value;
    }
  }

);


.font-sizes() {
  .config();
}

each(.font-sizes(), {

    // 文字大小
    .fs-@{key} {
      font-size:@value*@base-size;
    }
  }

);

.fl {
  float: left;
}

.fr {
  float: right;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-num() {
  // flex flex-1
  sub  : 1;
  twice: 2;
  third: 3;
}

each(.flex-num(), .(@v, @k) {
    .flex-@{k} {
      flex:@v
    }
  }

);
// flex-jc

.flex-justify-content() {
  start  : flex-start;
  end    : flex-end;
  center : center;
  between: space-between;
  around : space-around;
}

each(.flex-justify-content(), {

    // flex justify-content
    .jc-@{key} {
      justify-content:@value;
    }

  }

);

// flex-ai
.flex-align-items() {
  start  : flex-start;
  end    : flex-end;
  center : center;
  stretch: stretch;
}

each(.flex-align-items(), {

    // flex align-items
    .ai-@{key} {
      align-items:@value;
    }
  }

);

.flex-align-self() {
  // flex align-self
  start   : flex-start;
  end     : flex-end;
  center  : center;
  baseline: baseline;
  stretch : stretch;
}

each(.flex-align-self(), {
    .as-@{key} {
      align-self: @value;
    }
  }

);

.grid {
  display: grid;
}

// spacing
.spacing-types() {
  m: margin;
  p: padding;
}

.spacing-directions() {
  t: top;
  r: right;
  b: bottom;
  l: left;
}

.spacing-sizes() {
  .config();
}

each(.spacing-types(), .(@stValue, @stKey) {

    each(.spacing-directions(), .(@sdValue, @sdKey) {

        each(.spacing-sizes(), .(@ssValue, @ssKey) {

            // mt-1
            .@{stKey}@{sdKey}-@{ssKey} {
              @{stValue}-@{sdValue}:@ssValue*@base-size
            }
          }

        )
      }

    );

    each(.spacing-sizes(), .(@ssValue, @ssKey) {

        // .m-1
        .@{stKey}-@{ssKey} {
          @{stValue}:@ssValue*@base-size
        }

        // .mx-1
        .@{stKey}x-@{ssKey} {
          @{stValue}-left :@ssValue*@base-size;
          @{stValue}-right:@ssValue*@base-size
        }

        // .my-1
        .@{stKey}y-@{ssKey} {
          @{stValue}-top   :@ssValue*@base-size;
          @{stValue}-bottom:@ssValue*@base-size
        }

      }

    )
  }

);

each(.spacing-directions(), .(@sdValue, @sdKey) {
    each(.spacing-sizes(), .(@ssValue, @ssKey) {

        // t-1
        .@{sdKey}-@{ssKey} {
          @{sdValue}:@ssValue*@base-size
        }
      }

    )
  }

);

.wh() {
  w: width;
  h: height;
}

.percent() {
  25 : 25%;
  30 : 30%;
  33 : 33.33%;
  50 : 50%;
  80 : 80%;
  100: 100%;
}

.pixel() {
  .config();
}

each(.wh(), .(@val, @key) {
    each(.pixel(), .(@v, @k) {

        // w-50
        .@{key}-@{k} {
          @{val}:@v*@base-size
        }


        .min@{key}-@{k} {
          min-@{val}:@v*@base-size
        }

        .max@{key}-@{k} {
          max-@{val}:@v*@base-size
        }
      }

    ) // w-100

    each(.percent(), .(@vv, @kk) {
        .@{key}-@{kk}pc {
          @{val}:@vv
        }
      }

    )
  }

);

each(.pixel(), .(@v, @k) {

    .lh-@{k} {
      line-height:@v*@base-size
    }
  }

);

.w() {
  w: width;
}

.h() {
  h: height;
}

.vw() {
  25 : 25vw;
  50 : 50vw;
  75 : 75vw;
  100: 100vw;
}

.vh() {
  25 : 25vh;
  50 : 50vh;
  75 : 75vh;
  100: 100vh;
}

each(.w(), .(@val, @key) {
    each(.vw(), .(@v, @k) {
        .@{key}-@{v} {
          @{val}:@v
        }
      }

    )
  }

);

each(.h(), .(@val, @key) {
    each(.vh(), .(@v, @k) {
        .@{key}-@{v} {
          @{val}:@v
        }
      }

    )
  }

);

.border-width() {
  .config();
}


each(.border-radius(), .(@val, @k) {
    .radius-@{k} {
      border-radius: @val;
    }
  }

);

.pointer {
  cursor: pointer;
}

.notAllowed {
  cursor: not-allowed;
}

// display
.inline-block {
  display: inline-block;
}

// none
.none {
  display: none;
}



.pointer-events-none {
  pointer-events: none;
  // 鼠标禁止事件
}


// z-index

.z-index() {
  1   : 1;
  10  : 10;
  50  : 50;
  100 : 100;
  1000: 1000;
}

each(.z-index(), {
    .z-index-@{key} {
      z-index: @value;
    }
  }

);

.position() {
  fixed   : fixed;
  relative: relative;
  absolute: absolute;
  sticky  : sticky;
}

each(.position(), {
    .@{key} {
      position:@value
    }
  }

);

.text-transform() {
  capitalize: capitalize; // 首字母大写
  uppercase : uppercase; //大写
  lowercase : lowercase; //小写
}

each(.text-transform(), {
    .text-transform-@{key} {
      text-transform:@value
    }
  }

) //居中

.vertical-align() {
  baseline   : baseline;
  bottom     : bottom;
  top        : top;
  sub        : sub;
  super      : super;
  revert     : revert;
  middle     : middle;
  inherit    : inherit;
  initial    : initial;
  text-bottom: text-bottom;
  text-top   : text-top;
  unset      : unset;
}

each(.vertical-align(), {
    .vertical-@{key} {
      vertical-align: @value;
    }
  }

);


.opacity() {
  1: 0.1;
  4: 0.4;
}

each(.opacity(), {
    .opacity-@{key} {
      opacity: @value;
    }
  }

);

.absolute-center {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
}

.transition {
  transition: all 0.3s;
}

.overHidden {
  overflow: hidden;
}

.overScroll-y {
  overflow-y: scroll;
}

.cb {
  clear: both;
}

//滚动条整体部分
::-webkit-scrollbar {
  width           : 5px;
  height          : 10px;
  background-color: #1890ff;
}

//scroll轨道背景
::-webkit-scrollbar-track {
  box-shadow      : inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius   : 10px;
  background-color: #d3d3d3;
}

//滚动条中能上下移动的小块
::-webkit-scrollbar-thumb {
  border-radius   : 10px;
  box-shadow      : inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #a3a3a3;
}